<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<title>Markdown 编辑器</title>
		<link rel="stylesheet" type="text/css" href="css/markdown.css" />
		<style type="text/css">
			html,
			body,
			#app {
				margin: 0;
				height: 100%;
			}
			
			#app .title {
				height: 40px;
				background: #000000;
				width: 100%;
				display: flex;
			}
			
			#app .title a {
				color: #DDDDDD;
				line-height: 40px;
				margin: 0 10px;
				text-decoration: none;
			}
			
			#app .content {
				font-family: 'Helvetica Neue', Arial, sans-serif;
				color: #333;
				display: flex;
				position: fixed;
				top: 40px;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
			
			#app .content textarea,
			#app .content div {
				display: inline-block;
				flex: 1;
				height: 100%;
				vertical-align: top;
				box-sizing: border-box;
				padding: 0 20px;
				overflow-y: auto;
				overflow-x: hidden;
			}
			
			#app .content textarea {
				border: none;
				border-right: 1px solid #ccc;
				resize: none;
				outline: none;
				background-color: #f6f6f6;
				font-size: 14px;
				font-family: 'Monaco', courier, monospace;
				padding: 20px;
			}
			
			#app .content code {
				color: #f66;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="title">
				<a title="杨振宇专版" href="javascript:void(0);">
					MarkDown网页版编辑器
				</a>
				<div style="flex: 1;"></div>
				<a title="保存" href="javascript:void(0);" @click="download">
					保存
				</a>
				<a title="切换" href="javascript:void(0);" @click="change">
					切换
				</a>
			</div>
			<div class="content">
				<textarea v-show="type<2" v-model="input"></textarea>
				<div v-show="type>0" v-html="compiledMarkdown"></div>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js?0.1"></script>
		<script type="text/javascript" src="js/showdown.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					input: '',
					type: 1,
					converter: new showdown.Converter({
						'tables': 'ture',
						'strikethrough': 'true',
						'tasklists': 'true',
						'openLinksInNewWindow': 'true'
					})
				},
				computed: {
					compiledMarkdown: function() {
						return this.converter.makeHtml(this.input);
					}
				},
				methods: {
					change: function() {
						this.type++;
						if(this.type == 3) this.type = 0;
					},
					download: function() {
						this.funDownload(this.input, this.getNowFormatDate() + '.md')
					},
					funDownload: function(content, filename) {
						// 创建隐藏的可***链接
						var eleLink = document.createElement('a');
						eleLink.download = filename;
						eleLink.style.display = 'none';
						// 字符内容转变成blob地址
						var blob = new Blob([content]);
						eleLink.href = URL.createObjectURL(blob);
						// 触发点击
						document.body.appendChild(eleLink);
						eleLink.click();
						// 然后移除
						document.body.removeChild(eleLink);
					},
					getNowFormatDate: function() {
						var d = new Date();
						var month = d.getMonth() + 1;
						var strDate = d.getDate();
						if(month >= 1 && month <= 9) {
							month = "0" + month;
						}
						if(strDate >= 0 && strDate <= 9) {
							strDate = "0" + strDate;
						}
						var hours = d.getHours();
						if(hours >= 0 && hours <= 9) {
							hours = "0" + hours;
						}
						var minutes = d.getMinutes();
						if(minutes >= 0 && minutes <= 9) {
							minutes = "0" + minutes;
						}
						var seconds = d.getSeconds();
						if(seconds >= 0 && seconds <= 9) {
							seconds = "0" + seconds;
						}
						return d.getFullYear() + "" + month + strDate + hours + minutes + seconds;
					}
				}
			})
		</script>
	</body>

</html>